/**
 * @author jianghongjun
 * @date 2016-08-10
 * @version 1.0.0
 * @see 生产DOM节点
 * @ToDo 后面需要优化代码，重复性的东西太多，代码复用较低
 */

/**
 * 创建头部模板导航菜单Dom节点
 * @param {string} colorNo 选择的样式字符串
 */
var createElement = function(colorNo){

    var navTitle = ["", "新闻", "政务", "视频", "房产", "汽车", "旅游", "生活", "彩龙社区", "V观昆明", "ENGLISH"];
    var aUrl = ["" ,"http://xw.kunming.cn/", "http://www.km.gov.cn/", "http://video.kunming.cn/",
                 "http://house.kunming.cn/", "http://auto.kunming.cn/", "http://travel.kunming.cn/",
                 "http://xw.kunming.cn/sh.htm", "http://www.clzg.cn/", "http://vg.kunming.cn/", "http://en.kunming.cn/"
                ];

    var sumNavTitle = ["昆明日报", "都市时报", "春城地铁报"];
    var sumAUrl = ["http://media.kunming.cn/", "http://media.kunming.cn/", "http://ccdtb.clzg.cn/"];

    var mobileMavenTitle = ["新闻", "政务", "视频", "房产", "汽车", "旅游", "生活", "彩龙社区", "V观昆明", "ENGLISH", "昆明日报", "都市时报", "春城地铁报"];
    var mobileMavenUrl = ["http://xw.kunming.cn/", "http://www.km.gov.cn/", "http://video.kunming.cn/",
                          "http://house.kunming.cn/", "http://auto.kunming.cn/", "http://travel.kunming.cn/",
                          "http://xw.kunming.cn/sh.htm", "http://www.clzg.cn/", "http://vg.kunming.cn/", "http://en.kunming.cn/",
                          "http://media.kunming.cn/", "http://media.kunming.cn/", "http://ccdtb.clzg.cn/"];

    var navContainer = document.getElementById("nav");

    var divObj = document.createElement("div");
    var ulObj = document.createElement("ul");
    var liObj = document.createElement("li");
    var aObj = document.createElement("a");
    var buttonObj = document.createElement("button");
    var navObj = document.createElement("nav");

    var navListObj = divObj.cloneNode(0);
    navListObj.setAttribute("class", "nav-list nav-style" + colorNo);

    var mobileNavObj = divObj.cloneNode(0);
    mobileNavObj.setAttribute("class", "mobileNav");

    var mobileLogo = divObj.cloneNode(0);
    mobileLogo.setAttribute("class", "mobile-logo");

    var triggerOverlayObj = buttonObj.cloneNode(0);
    triggerOverlayObj.id = "trigger-overlay";
    triggerOverlayObj.setAttribute("type", "button");
    triggerOverlayObj.setAttribute("class", "showMavenBtn nav-style" + colorNo);

    var triggerOverlayUl = ulObj.cloneNode(0);
    var triggerOverlayli1 = liObj.cloneNode(0);
    var triggerOverlayli2 = liObj.cloneNode(0);
    var triggerOverlayli3 = liObj.cloneNode(0);

    /* @ToDo 这里需要优化 */
    triggerOverlayUl.appendChild(triggerOverlayli1);
    triggerOverlayUl.appendChild(triggerOverlayli2);
    triggerOverlayUl.appendChild(triggerOverlayli3);

    triggerOverlayObj.appendChild(triggerOverlayUl);

    var overlayObj = divObj.cloneNode(0); // ----> 1
    overlayObj.setAttribute("class", "overlay overlay-simplegenie mobileStyle" + colorNo);

    var overlayCloseObj = buttonObj.cloneNode(0);
    overlayCloseObj.setAttribute("type", "button");
    overlayCloseObj.setAttribute("class", "overlay-close");
    overlayCloseObj.text = "Close";

    overlayObj.appendChild(overlayCloseObj);

    var overlayNavObj = navObj.cloneNode(0);
    var navUlObj = ulObj.cloneNode(0);

    for(var i = 0; i < mobileMavenTitle.length; i++){

        var tempLiObj = liObj.cloneNode(0);
        var tempAObj = aObj.cloneNode(0);

        tempAObj.href = mobileMavenUrl[i];
        tempAObj.text = mobileMavenTitle[i];
        tempLiObj.appendChild(tempAObj);

        navUlObj.appendChild(tempLiObj);

    }

    overlayNavObj.appendChild(navUlObj);

    var tempRangoonObj = aObj.cloneNode(0);
    tempRangoonObj.setAttribute("class", "rangoon");

    var tempRangoonImgObj = divObj.cloneNode(0);
    tempRangoonImgObj.setAttribute("class", "img1");

    tempRangoonObj.appendChild(tempRangoonImgObj);

    var tempRangoonLiObj = liObj.cloneNode(0);
    tempRangoonLiObj.appendChild(tempRangoonObj);

    navUlObj.appendChild(tempRangoonLiObj);

    var tempNavObj = navObj.cloneNode(0);
    tempNavObj.appendChild(navUlObj);
    overlayObj.appendChild(tempNavObj);

    mobileNavObj.appendChild(mobileLogo);
    mobileNavObj.appendChild(triggerOverlayObj);
    mobileNavObj.appendChild(overlayObj);

    navListObj.appendChild(mobileNavObj);

    var navItemUl = ulObj.cloneNode(0);
    navItemUl.setAttribute("class", "pcNav");

    for(var i = 0; i < navTitle.length; i++){

        var navItemObj = liObj.cloneNode(0);
        navItemObj.setAttribute("class", "nav-item-style" + colorNo + " mavenItem");

        if(i === 0){

            var logoObj = divObj.cloneNode(0);
            logoObj.setAttribute("class", "logo");

            navItemObj.appendChild(logoObj);

        }else{

            var navItemA = aObj.cloneNode(0);
            navItemA.setAttribute("href", aUrl[i]);
            navItemA.innerHTML = navTitle[i];

            navItemObj.appendChild(navItemA);

        }

        navItemUl.appendChild(navItemObj);
    }

    var mmElementObj = liObj.cloneNode(0);
    mmElementObj.setAttribute("class", "nav-item-style" + colorNo + " mavenItem");

    var rangoonElementObj = aObj.cloneNode(0);
    rangoonElementObj.setAttribute("class", "rangoon img1 noUnderline");

    mmElementObj.appendChild(rangoonElementObj);
    navItemUl.appendChild(mmElementObj);

    var downMavenObj = divObj.cloneNode(0);
    downMavenObj.setAttribute("class", "down-maven");

    var sumItemLiObj = liObj.cloneNode(0);
    sumItemLiObj.appendChild(downMavenObj);
    sumItemLiObj.setAttribute("class", "sum-maven nav-item-style" + colorNo);

    var downMavenUl = ulObj.cloneNode(0);

    for(var i = 0; i < sumNavTitle.length; i++){

        var downMavenLi = liObj.cloneNode(0);
        var downMavenA = aObj.cloneNode(0);

        downMavenA.setAttribute("href", sumAUrl[i]);
        downMavenA.innerHTML = sumNavTitle[i];

        downMavenLi.appendChild(downMavenA);

        if(i === sumNavTitle.length - 1){
            downMavenLi.setAttribute("class", "bottom-line-style");
        }

        downMavenUl.appendChild(downMavenLi);

    }

    sumItemLiObj.appendChild(downMavenUl);

    navItemUl.appendChild(sumItemLiObj);

    navListObj.appendChild(navItemUl);

    navContainer.appendChild(navListObj);

};

/**
 * 创建头部专题定制Dom节点
 */
var createCustomElement = function(){

    var navTitle = ["", "新闻", "政务", "视频", "房产", "汽车", "旅游", "生活", "彩龙社区", "V观昆明", "ENGLISH"];
    var aUrl = ["" ,"http://xw.kunming.cn/", "http://www.km.gov.cn/", "http://video.kunming.cn/",
        "http://house.kunming.cn/", "http://auto.kunming.cn/", "http://travel.kunming.cn/",
        "http://xw.kunming.cn/sh.htm", "http://www.clzg.cn/", "http://vg.kunming.cn/", "http://en.kunming.cn/"
    ];

    var sumNavTitle = ["昆明日报", "都市时报", "春城地铁报"];
    var sumAUrl = ["http://media.kunming.cn/", "http://media.kunming.cn/", "http://ccdtb.clzg.cn/"];

    var mobileMavenTitle = ["新闻", "政务", "视频", "房产", "汽车", "旅游", "生活", "彩龙社区", "V观昆明", "ENGLISH", "昆明日报", "都市时报", "春城地铁报"];
    var mobileMavenUrl = ["http://xw.kunming.cn/", "http://www.km.gov.cn/", "http://video.kunming.cn/",
                           "http://house.kunming.cn/", "http://auto.kunming.cn/", "http://travel.kunming.cn/",
                           "http://xw.kunming.cn/sh.htm", "http://www.clzg.cn/", "http://vg.kunming.cn/", "http://en.kunming.cn/",
                           "http://media.kunming.cn/", "http://media.kunming.cn/", "http://ccdtb.clzg.cn/"];

    var navContainer = document.getElementById("nav");

    var divObj = document.createElement("div");
    var ulObj = document.createElement("ul");
    var liObj = document.createElement("li");
    var aObj = document.createElement("a");
    var buttonObj = document.createElement("button");
    var navObj = document.createElement("nav");

    var navListObj = divObj.cloneNode(0);
    navListObj.setAttribute("class", "nav-custom-list");

    var mobileCustomNav = divObj.cloneNode(0);
    mobileCustomNav.setAttribute("class", "mobileCustomNav");

    var mobileCustomLogo = divObj.cloneNode(0);
    mobileCustomLogo.setAttribute("class", "mobile-custom-logo");

    mobileCustomNav.appendChild(mobileCustomLogo);

    var triggerOverlay = buttonObj.cloneNode(0);
    triggerOverlay.id = "trigger-overlay";
    triggerOverlay.setAttribute("type", "button");
    triggerOverlay.setAttribute("class", "showCustomMavenBtn nav-custom-style");

    var triggerOverlayUl = ulObj.cloneNode(0);
    var triggerOverlayLi1 = liObj.cloneNode(0);
    var triggerOverlayLi2 = liObj.cloneNode(0);
    var triggerOverlayLi3 = liObj.cloneNode(0);
    triggerOverlayUl.appendChild(triggerOverlayLi1);
    triggerOverlayUl.appendChild(triggerOverlayLi2);
    triggerOverlayUl.appendChild(triggerOverlayLi3);

    triggerOverlay.appendChild(triggerOverlayUl);

    mobileCustomNav.appendChild(triggerOverlay);

    var mobileCystomStyle = divObj.cloneNode(0);
    mobileCystomStyle.setAttribute("class", "overlay overlay-simplegenie mobileCystomStyle");

    var overlayClose = buttonObj.cloneNode(0);
    overlayClose.setAttribute("type", "button");
    overlayClose.setAttribute("class", "overlay-close");

    var mobileCystomStyleNav = navObj.cloneNode(0);
    var mobileCystomStyleUl = ulObj.cloneNode(0);

    mobileCystomStyleNav.appendChild(mobileCystomStyleUl);

    for(var i = 0; i < mobileMavenTitle.length; i++){

        var mobileCystomStyleLi = liObj.cloneNode(0);
        var mobileCystomStyleA = aObj.cloneNode(0);

        mobileCystomStyleA.innerHTML = mobileMavenTitle[i];
        mobileCystomStyleA.href = mobileMavenUrl[i];

        mobileCystomStyleLi.appendChild(mobileCystomStyleA);

        mobileCystomStyleUl.appendChild(mobileCystomStyleLi);
    }

    var img2Obj = divObj.cloneNode(0);
    img2Obj.setAttribute("class", "img2");
    var rangoonA = aObj.cloneNode(0);
    rangoonA.setAttribute("class", "rangoon");

    rangoonA.appendChild(img2Obj);

    var rangoonLi = liObj.cloneNode(0);
    rangoonLi.appendChild(rangoonA);

    mobileCystomStyleUl.appendChild(rangoonLi);

    mobileCystomStyleNav.appendChild(mobileCystomStyleUl);

    mobileCystomStyle.appendChild(overlayClose);
    mobileCystomStyle.appendChild(mobileCystomStyleNav);

    mobileCustomNav.appendChild(mobileCystomStyle);

    var navItemUl = ulObj.cloneNode(0);
    navItemUl.setAttribute("class", "pcNav");

    for(var i = 0; i < navTitle.length; i++){

        var navItemObj = liObj.cloneNode(0);

        if(i === 0){

            var logoObj = divObj.cloneNode(0);
            logoObj.setAttribute("class", "logo1");

            navItemObj.appendChild(logoObj);

        }else{

            var navItemA = aObj.cloneNode(0);
            navItemA.setAttribute("href", aUrl[i]);
            navItemA.innerHTML = navTitle[i];

            navItemObj.appendChild(navItemA);

        }

        navItemUl.appendChild(navItemObj);
    }

    var mmElementObj = liObj.cloneNode(0);

    var rangoonElementObj = aObj.cloneNode(0);
    rangoonElementObj.setAttribute("class", "rangoon1 img2 noUnderline");

    mmElementObj.appendChild(rangoonElementObj);
    navItemUl.appendChild(mmElementObj);

    var downMavenObj = divObj.cloneNode(0);
    downMavenObj.setAttribute("class", "down-maven1");

    var sumItemLiObj = liObj.cloneNode(0);
    sumItemLiObj.appendChild(downMavenObj);
    sumItemLiObj.setAttribute("class", "sum-custom-maven nav-item-style1");

    var downMavenUl = ulObj.cloneNode(0);

    for(var i = 0; i < sumNavTitle.length; i++){

        var downMavenLi = liObj.cloneNode(0);
        var downMavenA = aObj.cloneNode(0);

        downMavenA.setAttribute("href", sumAUrl[i]);
        downMavenA.innerHTML = sumNavTitle[i];

        downMavenLi.appendChild(downMavenA);

        if(i === sumNavTitle.length - 1){
            downMavenLi.setAttribute("class", "bottom-line-custom");
        }

        downMavenUl.appendChild(downMavenLi);

    }

    sumItemLiObj.appendChild(downMavenUl);

    navItemUl.appendChild(sumItemLiObj);

    navListObj.appendChild(navItemUl);
    navListObj.appendChild(mobileCustomNav);

    navContainer.appendChild(navListObj);

};

/**
 * 创建底部专题样式
 * @param {string} colorNo 选择的样式字符串
 */
var createBottomElement = function(colorNo){

    var declareTitle1 = ["站点导航", "关于昆明信息港", "版权与免责", "广告服务", "联系我们"];
    var declareTitle2 = ["广告热线：(0871)65390101", "新闻热线：(0871)65364045", "24小时网址违法和不良信息举报电话：0871-65390101"];
    var declareTitle3 = ["举报邮箱：2779967946@qq.com", "国新网许可证编号：5312011001", "增值电信业务经营许可证(ICP)：滇B2-20090009"]
    var declareUrl = ["http://www.kunming.cn/index/node_8313.htm", "http://e.kunming.cn/index/about.htm",
                       "http://news.kunming.cn/index/content/2009-06/05/content_1893585.htm", "http://e.kunming.cn/",
                       "http://news.kunming.cn/index/content/2009-08/28/content_1955074.htm"
                    ];
    var copyrightImgUrl = ["http://www.kunming.cn/_include/new2014/icp1.jpg", "http://www.kunming.cn/_include/new2014/icp2.jpg", "http://www.kunming.cn/_include/new2014/icp3.jpg"]
    var tempStr = "昆明信息港2014-All&nbsp;Right&nbsp;Reseved";

    var bottomContainer = document.getElementById("bottom");

    var divObj = document.createElement("div");
    var ulObj = document.createElement("ul");
    var liObj = document.createElement("li");
    var aObj = document.createElement("a");
    var spanObj = document.createElement("span");
    var imgObj = document.createElement("img");

    var bottomDeclare = divObj.cloneNode(0);

    if(parseInt(colorNo) === 1){
        bottomContainer.setAttribute("class", "bottom-declare");
    }else{
        bottomContainer.setAttribute("class", "bottom-declare black-declare");
    }

    var declareContent1 = divObj.cloneNode(0);
    declareContent1.setAttribute("class", "declare-content" + colorNo);

    var declareItem1 = divObj.cloneNode(0);
    declareItem1.setAttribute("class", "declare-item");

    var declareItemPadding1 =ulObj.cloneNode(0);
    declareItemPadding1.setAttribute("class", "declare-item-padding1");

    for(var i = 0 ; i <　declareTitle1.length; i++){

        var declareItemPadding1LiObj = liObj.cloneNode(0);
        var declareItemPadding1AObj = aObj.cloneNode(0);

        declareItemPadding1AObj.setAttribute("href", declareUrl[i]);
        declareItemPadding1AObj.text = declareTitle1[i];

        if(i === 3){
            declareItemPadding1LiObj.setAttribute("class", "contentText");
        }

        declareItemPadding1LiObj.appendChild(declareItemPadding1AObj);

        declareItemPadding1.appendChild(declareItemPadding1LiObj);
    }

    declareItem1.appendChild(declareItemPadding1);

    var declareItem2 = divObj.cloneNode(0);
    declareItem2.setAttribute("class", "declare-item");

    var declareItemPadding2 = ulObj.cloneNode(0);
    declareItemPadding2.setAttribute("class", "declare-item-padding2")

    for(var i = 0 ; i < declareTitle2.length; i++){

        var declareItemPadding2LiObj = liObj.cloneNode(0);
        declareItemPadding2LiObj.innerHTML = declareTitle2[i];

        declareItemPadding2.appendChild(declareItemPadding2LiObj);

    }

    declareItem2.appendChild(declareItemPadding2);

    var declareItem3 = divObj.cloneNode(0);
    declareItem3.setAttribute("class", "declare-item");

    var declareItemPadding3 = ulObj.cloneNode(0);
    declareItemPadding3.setAttribute("class", "declare-item-padding3");

    for(var i = 0; i < declareTitle3.length; i++){

        var declareItemPadding3LiObj = liObj.cloneNode(0);
        declareItemPadding3LiObj.innerHTML = declareTitle3[i];

        declareItemPadding3.appendChild(declareItemPadding3LiObj);

    }

    declareItem3.appendChild(declareItemPadding3);

    declareContent1.appendChild(declareItem1);
    declareContent1.appendChild(declareItem2);
    declareContent1.appendChild(declareItem3);

    var copyright = divObj.cloneNode(0);
    copyright.setAttribute("class", "copyright");

    var copyrightItem1 = divObj.cloneNode(0);
    copyrightItem1.setAttribute("class", "copyright-item");

    var copyrightItem1Ul =ulObj.cloneNode(0);

    for(var i = 0; i < copyrightImgUrl.length; i++){

        var copyrightItem1Li = liObj.cloneNode(0);
        var copyrightItem1Img = imgObj.cloneNode(0);

        copyrightItem1Img.setAttribute("src", copyrightImgUrl[i]);
        copyrightItem1Li.appendChild(copyrightItem1Img);

        copyrightItem1Ul.appendChild(copyrightItem1Li);
    }

    copyrightItem1.appendChild(copyrightItem1Ul);

    var copyrightItem2 = divObj.cloneNode(0);
    copyrightItem2.setAttribute("class", "copyright-item");

    var copyrightItem2Ul = ulObj.cloneNode(0);
    var copyrightItem2Li = liObj.cloneNode(0);
    var copyrightItem2Span = spanObj.cloneNode(0);

    copyrightItem2Span.setAttribute("class", "cop-ico");
    copyrightItem2Span.innerHTML = "©";

    copyrightItem2Li.innerHTML = tempStr;
    copyrightItem2Li.appendChild(copyrightItem2Span);

    copyrightItem2Ul.appendChild(copyrightItem2Li);

    copyrightItem2.appendChild(copyrightItem2Ul);

    copyright.appendChild(copyrightItem1);
    copyright.appendChild(copyrightItem2);

    bottomDeclare.appendChild(declareContent1);
    bottomDeclare.appendChild(copyright);

    bottomContainer.appendChild(bottomDeclare);

};

var ElementEvent = function(){
    var triggerBttn = document.getElementById( 'trigger-overlay' ),
        overlay = document.querySelector( 'div.overlay' ),
        closeBttn = overlay.querySelector( 'button.overlay-close' );
    transEndEventNames = {
        'WebkitTransition': 'webkitTransitionEnd',
        'MozTransition': 'transitionend',
        'OTransition': 'oTransitionEnd',
        'msTransition': 'MSTransitionEnd',
        'transition': 'transitionend'
    },
        transEndEventName = transEndEventNames[ Modernizr.prefixed( 'transition' ) ],
        support = { transitions : Modernizr.csstransitions };

    function toggleOverlay() {
        if( classie.has( overlay, 'open' ) ) {
            classie.remove( overlay, 'open' );
            classie.add( overlay, 'close' );
            var onEndTransitionFn = function( ev ) {
                if( support.transitions ) {
                    if( ev.propertyName !== 'visibility' ) return;
                    this.removeEventListener( transEndEventName, onEndTransitionFn );
                }
                classie.remove( overlay, 'close' );
            };
            if( support.transitions ) {
                overlay.addEventListener( transEndEventName, onEndTransitionFn );
            }
            else {
                onEndTransitionFn();
            }
        }
        else if( !classie.has( overlay, 'close' ) ) {
            classie.add( overlay, 'open' );
        }
    }

    triggerBttn.addEventListener( 'click', toggleOverlay );
    closeBttn.addEventListener( 'click', toggleOverlay );
};

var createNode = function(){

    var js=document.scripts;
    var jsPath;
    for(var i=0;i<js.length;i++){
        if(js[i].src.indexOf("createDomElement.js")>-1){
            jsPath=js[i].src;
        }
    }

    var type = jsPath.substring(jsPath.indexOf("type") + 5, jsPath.indexOf("&"));
    var colorNo = jsPath.substring(jsPath.indexOf("color") + 6, jsPath.length);

    switch(type){
        case "nav": createElement(colorNo); ElementEvent(); break;
        case "navCustom": createCustomElement(); ElementEvent(); break;
        case "bottom": createBottomElement(colorNo); break;
    }

};

createNode();